<!DOCTYPE html>
<html manifest="../menpuji.appcache" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta content="Apache Tapestry Framework (version 5.3.2)" name="generator" />
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
	<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<script>
		window.root = '..';
	</script>
	<script src="jquery.js"></script>
	<link href="boots.css" charset="UTF-8" type="text/css" rel="stylesheet" />
	<title>安装更新</title>
	<script>
		function getPathOf(url) {
			var paths = location.pathname.split('/');
			paths.pop();
			if (url == '../') paths.pop();
			return paths.join('/') + '/';
		}

	</script>
	<script>
		$(function () {
			$('#reload').click(function (e) {
				var exp = new Date();
				exp.setTime(exp.getTime() + 1 * 60 * 1000);

				document.cookie = "from_version=1.0; expires=" + exp.toGMTString() + '; path=' + getPathOf('./');

				window.location.reload();
			});
			$('#goBack').click(function (e) {
				window.history.back();
			});
		})
		checkCache();
		function checkCache() {
			window.applicationCache.addEventListener('updateready', newVersionDownloaded);
			window.applicationCache.addEventListener('noupdate', newVersionDownloaded);
			window.applicationCache.addEventListener('error', function (e) {
				console.log('error status');
				console.log(e);
				$('#checking').hide();
				$('#downloading').hide();
				$('#failed').show();
			});
			//		window.applicationCache.addEventListener('obsolete', go);
			window.applicationCache.addEventListener('cached', newVersionDownloaded);
			window.applicationCache.addEventListener('downloading', function (e) {
				$('#checking').hide();
				$('#downloading').show();
			});
			window.applicationCache.addEventListener('progress', function (e) {
				updateProgress(e.loaded / e.total, e);
				console.log(e)
				// if (e.total == e.loaded) {
				// 	newVersionDownloaded(e);
				// }
			});
		}
		function newVersionDownloaded(e) {
			console.log('newVersionDownloaded');
			try {
				window.applicationCache.swapCache();
			} catch (e) { }
			document.cookie = "from_version=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + getPathOf('../');
			window.location.href = '../index.html';
		}

		function updateProgress(percentage, e) {
			$('.field-total').text(e.total);
			$('.field-loaded').text(e.loaded);
			$('.field-update-progress').css('width', percentage * 100 + "%");
		}

	</script>
</head>

<body style="background-color: #ffffff;">
	<div class="judo-page setup-wizard-page boots-page">
		<div id="checking" class="container">
			<div class="header">
				检查安装环境
			</div>
			<div class="main-box v-layout">
				<div class="padding-zone">
					<div>正在连接服务器 ... </div>
				</div>
				<div class="auto-flex"></div>
			</div>
			<div class="footer">
				<box shape="rect" id="goBack" class="btn btn-highlight btn-size-l auto-flex">
					<box class="button-text">返回上级</box>
				</box>
			</div>
		</div>
		<div style="display:none" id="downloading" class="container">
			<div class="header">
				安装更新
			</div>
			<div class="main-box v-layout">
				<div class="auto-flex v-layout v-gap pack-c padding-zone">
					<div>正在更新应用程序 ... (<span class="field-loaded">.</span>/<span class="field-total">.</span>)</div>
					<div class="progress-bar">
						<div class="field-update-progress progress-value"></div>
					</div>
				</div>
				<div class="auto-flex"></div>
			</div>
			<div class="footer">
				<box shape="rect" id="goBack" class="btn btn-highlight btn-size-l auto-flex">
					<box class="button-text">返回上级</box>
				</box>
			</div>
		</div>
		<div style="display:none" id="failed" class="container">
			<div class="header">
				安装失败
			</div>
			<div class="main-box v-layout">
				<div class="color-warning auto-flex v-layout v-gap box-c padding-zone">
					<div>更新程序发生错误，可能是网络或者服务器暂时繁忙，请稍候再试。</div>
				</div>
				<div class="auto-flex"></div>
			</div>
			<div class="footer">
				<box shape="rect" id="reload" class="btn btn-highlight btn-size-l auto-flex">
					<box class="button-text">重试安装</box>
				</box>
			</div>
		</div>
	</div>
</body>

</html>